<template>
	<el-row :span="24" class="header">
		<el-col :span="9">
			<el-row style="margin-left:30px" type="flex" align="middle">
				<img class="logo" :src="img_logo">
			</el-row>
		</el-col>
		<el-col :span="6" class="mainSection" >
			<el-row type="flex" align="middle" justify="center">
				<span class="txt-section">电梯监控系统</span>
			</el-row>
		</el-col>
		<el-row :span="9" class="userinfo" type="flex" align="middle" justify="end">
			<el-row type="flex" align="middle" v-if="showUser">
				<img v-if="sysUserAvatar && sysUserAvatar.length > 0" class="user-avatar" :src="sysUserAvatar">
				<img v-else class="user-avatar" :src="img_user">
				<span class="user-name">sysUserName</span>
				<div class="line"></div>
				<span class="logout">退出</span>
			</el-row>
		</el-row>
  </el-row>
</template>

<script>

import { user } from '@/utils/role.js'

export default {
	name: 'TitleInfo',
	props: {
		showUser: {
			type: Boolean,
			default: false
		},
		sysUserName: {
			type: String,
			required:true
		},
		sysUserAvatar: {
			type: String,
			required:true
		},
	},
	data() {
		return {
			img_logo:"",
			img_user:"",
		}
	},
  	methods: {
		logout: function () {
			var _this = this;
			this.$confirm('确认退出吗?', '提示', {
				//type: 'warning'
			}).then(() => {
				sessionStorage.removeItem(user().id + '_userInfo');
				sessionStorage.removeItem(user().id + '_sessionToken');
				_this.$router.push('/login');
			}).catch(() => {

			});
    	},
	},
}
</script>

<style scoped lang="scss">
	@import '~scss_vars';
	.header {
		height: 60px;
		line-height: 60px;
		background: linear-gradient(to top, #181C25 , #393B42);
		border-bottom: 2px solid #3E3E47;
		.logo {
			width:40px;
			height:40px;
			font-size: 18px;
			margin: 10px 0px 10px 20px;
		}
		.txt-section {
			font-size: 18px;
			white-space: nowrap;
			text-overflow: ellipsis;
			color: white;
		}
		
		.userinfo {
			text-align: right;
			padding-right: 40px;
			height: 60px;

			.user-avatar {
				width: 40px;
				height: 40px;
				margin-right: 10px;
			}
	
			.user-name {
				font-size: 14px;
				color: white;
			}
			.line {
				height: 18px;
				width: 1px;
				background: rgb(148, 146, 146);
				margin: 10px;
			}
			.logout {
				font-size: 14px;
				color: lightgray;
			}
		}
	}
</style>